<!DOCTYPE html>
<!--
  ~ <<
  ~ Davinci
  ~ ==
  ~ Copyright (C) 2016 - 2018 EDP
  ~ ==
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~       http://www.apache.org/licenses/LICENSE-2.0
  ~  Unless required by applicable law or agreed to in writing, software
  ~  distributed under the License is distributed on an "AS IS" BASIS,
  ~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~  See the License for the specific language governing permissions and
  ~  limitations under the License.
  ~ >>
  -->

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="format-detection" content="telephone=no" />
  <meta content="email=no" name="format-detection" />
  <title>Join</title>
  <style>
    html,body,div,header,h2,article,button,p {
      margin: 0; padding: 0;
    }
    html,body{
      height: 100%;
      width: 100%;
    }
    .container {
      width: 100%;
      height: 100%;
      background-color: #EAEDF1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .wrapper {
      margin: 48px auto;
      width: 420px;
      display: flex;
      flex-direction: column;
    }
    header{
      flex:0;
      background-color: #1B98E0;
      border-radius: 2px 2px 0 0;
      line-height: 56px;
      height: 56px;
      color: #fff;
    }
    article {
      flex: 1;
      background-color: #fff;
      border-radius: 0 0 2px 2px;
      padding: 32px;
    }
    .hi {
      text-align: left;
    }
    .title {
      text-align: center;
    }
    .commonTitle {
      color: #444444;
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 20px;
    }
    .sure{
      font-size: 16px;
      outline: none;
      display: inline-block;
      margin-bottom: 16px;
      padding: 8px 48px;
      border-radius: 4px 4px;
      background-color: #1B98E0;
      color: #fff;
      cursor: pointer;
      text-decoration:none;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      text-align: center;
    }
    .detail {
      font-size: 12px;
      color: rgba(0,0,0,.59);
      text-align: center;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="wrapper">
    <header class="title">
      <h2>欢迎使用davinci</h2>
    </header>
    <article>
      <div class="hi commonTitle">Hi,<span th:text="${username}">username</span>!</div>
      <div class="title commonTitle"> <span th:text="${inviter}">inviter</span>邀请您加入<span th:text="${orgName}">organization</span></div>
      <a class="sure" th:href="@{http://localhost:5002/#/joinOrganization(token=${token})}">接受邀请<span th:text="${orgName}">organization</span></a>
      <!--<a class="sure" th:href="@{{host}/#/joinOrganization(token=${token},host=${host})}">接受邀请<span th:text="${orgName}">organization</span></a>-->
      <p class="detail">此邮件为确认邀请邮件。如拒绝加入或已加入该组织，请忽略。</p>
    </article>
  </div>
</div>
</body>
</html>
